<template>
  <view class="index-content">
    <!-- 原有模板内容 -->
    <tabbar :index="0"></tabbar>
    <up-swiper height="300rpx" :list="list3" indicator
               border-radius="20px"
               indicatorMode="line" 
               circular 
               style="border-radius: 10px;">
    </up-swiper>
    <view class="index-block-title"> 最近状态 </view>
    <view class="index-block">
      <view style="display: flex;  flex: 1; flex-direction: column;">
        <view 
          style=" margin:5px; width: 95%; flex: 6;
                  background-color: #f4efea;
                  border-radius: 20rpx; "
        >
          <State :stateText="sleepStatus.score" tipText="评分"
                 bgImage="/static/img/index/state_1.jpg"
                 :stateFlex="5" :tipFlex="2">
          </State>
        </view>
        <view style=" margin:0px 5px; 
                      width: 95%; flex: 4;
                      background-color: #bcd697;
                      border-radius: 20rpx;">
          <State :stateText="sleepStatus.fallAsleepTime" tipText="起床时间"
                 bgImage="/static/img/index/state_2.jpg"
                 :stateFlex="2" :tipFlex="2">
          </State>
        </view>
      </view>
      <view style="display: flex; flex: 1;  flex-direction: column;">
        <view
          style=" margin:5px; width: 95%; flex: 4;
                  background-color: #d8eff4;
                  border-radius: 20rpx; "
        >
          <State :stateText="sleepStatus.sleepDurationSecond" tipText="睡眠持续时间"
                 bgImage="/static/img/index/state_3.jpg"
                 :stateFlex="1" :tipFlex="3">
          </State>
        </view>
        <view
          style=" margin:0px 5px; 
                  width: 95%; flex: 6;
                  background-color: #f4efea;
                  border-radius: 20rpx; "
        >
          <State :stateText="sleepStatus.thisWeekSleepDurationMinute" tipText="本周睡眠时长"
                 bgImage="/static/img/index/state_4.jpg"
                 :stateFlex="1" :tipFlex="1">
          </State>222
        </view>	
      </view>
    </view>
    <!-- bug修复：添加url()包裹图片路径 -->
    <view class="index-block-title" > 睡眠技巧 </view>
    <view class="index-skill" style="background-image: url('/static/img/index/skill.jpg')"> </view>
	<!-- 新增透明占位组件 -->
	<view style="height: 200rpx; opacity: 0;"></view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import State from '../../components/state.vue';
import { getSleepMonitorStatus } from '@/api/sleepMonitor';

// 定义 sleepStatus 类型
interface SleepStatus {
  score: string;
  sleepDurationSecond: string;
  fallAsleepTime: string;
  thisWeekSleepDurationMinute: string;
}

// 初始化数据
const sleepStatus = ref<SleepStatus>({
  score: '80/100',
  sleepDurationSecond: '8 h',
  fallAsleepTime: '05:30',
  thisWeekSleepDurationMinute: '54 h'
});

const list3 = ref<string[]>([
  "/static/img/index/swiper2.jpg",
  "/static/img/index/swiper1.jpg"
]);

// 获取睡眠监测状态
const getSleepMonitorStatusData = async () => {
  try {
    const response = await getSleepMonitorStatus();
    // @ts-ignore
    sleepStatus.value = response.data;
  } catch (error) {
    console.error('获取睡眠监测状态失败:', error);
  }
};

// 页面显示时获取数据，保持 onMounted 不变
onMounted(() => {
  getSleepMonitorStatusData();
});
</script>

<style lang="scss" scoped>
.index-content {
  padding: 20rpx;
  margin: 10rpx;
  background-color: #fff;
}

.index-block {
  display: flex;
  height: 50vh;
  justify-content: space-around;
  background-color: #fff;
}

.index-block-title {
  margin-top: 20rpx;
  font-size: 35rpx;
  font-weight: bold;
}

.index-skill {
  height: 300rpx;
  background-color: #aaa;
  background-size: 100% 100%; 
  background-repeat: no-repeat; 
  background-position: top center; 
  border-radius: 10px;
}
</style>